<template>
    <div class="footer" v-if="todos.length !== 0">
        <span>{{ unTodoCount }}项未完成</span>
        <div>
            <span @click="$emit('clearDone')">清除已完成</span>
            <span class="selectAll" @click="checkAll">全选</span>
        </div>
    </div>
    <div v-else style="text-align:center;font-size:20px;">
        暂无任务
    </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps(['todos'])
// 计算未完成的todo数量
const unTodoCount = computed(() => {
    return props.todos.filter(todo => !todo.isDone).length
})

// 全选
let isAll = false
const checkAll = () => {
    isAll = !isAll
    props.todos.forEach(todo => {
        todo.isDone = isAll
    })
}


</script>

<style lang="scss" scoped>
.footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .selectAll {
        margin-left: 10px;
    }
}
</style>